<template>
    <div id="product-detail">
        <el-form label-width="100px" class="demo-prdAddForm" size="small">
            <el-form-item label="产品名称">
                {{productInfo.productName}}
            </el-form-item>
            <el-form-item label="库存价格">
                <table border="0" cellspacing="1" cellpadding="0" width="400px" class="custom-table style-a">
                    <thead>
                    <th>总库存</th>
                    <th>门市价（元）</th>
                    <th>返佣（元）</th>
                    <th>操作</th>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            {{productInfo.total}}
                        </td>
                        <td>
                            {{productInfo.price}}
                        </td>
                        <td>
                            {{productInfo.serviceCharge}}
                        </td>
                        <td><a href="javascript:void(0);" @click="checkCalendarPrice()">查看日历价格</a></td>
                    </tr>
                    </tbody>
                </table>
            </el-form-item>

            <el-form-item label="退款设置">
                <p>未激活退款{{productInfo.refundUnactive}}元</p>
            </el-form-item>
            <el-form-item label="产品详情">
                <div v-html="productInfo.productDetail"></div>
            </el-form-item>
            <el-form-item label="退款说明">
                {{productInfo.refundExplain}}
            </el-form-item>
            <el-form-item label="短信设置">
                {{productInfo.messageContent}}
            </el-form-item>
            <el-form-item label="适用人群">
                {{productInfo.applyPerson}}
            </el-form-item>
            <el-form-item label="产品图片" prop="name">
                <img v-if="productInfo.imageUrl" :src="productInfo.imageUrl" class="avatar">
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="closeForm()">返回</el-button>
            </el-form-item>
        </el-form>
        <el-dialog
                title="日历价格"
                width="800px"
                :visible.sync="calendarDialogVisible">
            <calendar-price
                    :calendarProp="calendarDataSet"
                    :calendarSet="calendarDataSet.calendarData"
                    :isPrdDetail="isDetail">
            </calendar-price>
        </el-dialog>
    </div>
</template>

<script>

	import { mapGetters } from 'vuex'
	import CalendarPrice from '@/components/CalendarPrice/calendarPrice.vue'
	import { getDistributorProductDetail } from '@/api/dProductList'
	const today = new Date()
	const todayStr = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate() + ' 00:00:00'
	export default {
		name: 'ecardAdd',
		computed: {
			...mapGetters([
				'name',
				'roles'
			])
		},
		components: {
			'calendar-price': CalendarPrice
		},
		data() {
			return {
				productInfo: {},
				calendarDialogVisible: false,
				calendarDataSet: {
					effect_time_start: new Date(todayStr)
				},
				isDetail: true
			}
		},
		created() {
			// 获取产品详情
			this.getDistributorProductDetail()
		},
		methods: {
			getDistributorProductDetail() {
				let params = {
					id: this.$route.query.id
				}
				getDistributorProductDetail(params).then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						this.productInfo = data.body
						let tmpArray = []
						data.body.integralSetList.forEach(item => {
							let tmpObj = {
								scoreSet: item
							}
							tmpArray.push(tmpObj)
						})
						this.productInfo.integralSetList = tmpArray
						this.calendarDataSet.price = data.body.price
						this.calendarDataSet.calendarData = data.body.productPriceCalendarDtoList
					}
				})
			},
			checkCalendarPrice() {
				this.calendarDialogVisible = true
			},
			closeForm() {
				let view = {
					name: this.$route.name,
					path: this.$route.path,
					query: this.$route.query
				}
				this.$store.dispatch('delVisitedViews', view).then((views) => {
					const latestView = views.slice(-1)[0]
					if (latestView) {
						this.$router.push({ path: latestView.path, query: latestView.query })
					} else {
						this.$router.push('/')
					}
				})
			}
		}
	}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
    .custom-table{
        border-collapse:collapse;
        margin-top: 12px;
        border: 1px solid #ebeef5;
        font-size: 12px;
        tbody{
            tr{
                border-bottom: 1px solid #ebeef5;
                text-align: center;
                color: #606266;
                td:first-child{
                    padding-left: 16px;
                }
                td:last-child{
                    padding-right: 16px;
                }
                td{
                    padding: 4px 0;
                    border-right: 1px solid #ebeef5;
                }
            }
            tr:hover{
                background: #f5f7fa;
            }
            tr:last-child{
                border-bottom: 1px solid #ebeef5;
            }
        }
        thead{
            line-height: 38px;
            background-color: #f5f7fa;
            tr{
                text-align: left;
            }
            th:first-child{
                padding-left:16px;
            }
            th{
                color: #505a6d;
                font-weight: bold;
                border-right: 1px solid #ebeef5;
                border-bottom:1px solid #ebeef5;
            }
        }
    }
</style>
<style rel="stylesheet/scss" lang="scss">
    #product-detail{
        .el-form-item{
            margin-bottom: 4px;
        }
    }
</style>


